<template>
  <view class="bottom-nav">
    <view 
      class="nav-item" 
      v-for="(item, index) in navList" 
      :key="index"
      @click="navigateTo(item.path)"
    >
      <!-- 图标：路径完全匹配时显示选中态 -->
      <image 
        :src="currentPath === item.path ? item.selectedIcon : item.icon" 
        class="nav-icon"
        mode="widthFix"
      />
      <!-- 未读徽章（仅消息项显示） -->
      <view class="badge" v-if="item.showBadge && unreadCount > 0">
        {{ unreadCount > 99 ? '99+' : unreadCount }}
      </view>
      <!-- 文字：路径完全匹配时显示选中态样式 -->
      <text 
        class="nav-text"
        :class="currentPath === item.path ? 'active' : ''"
      >{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    currentPath: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      navList: [], // 导航列表（按角色动态生成）
      unreadCount: 0 // 未读消息数
    };
  },
  created() {
    const role = uni.getStorageSync('roleLogo'); // 从缓存取角色标识
	console.log('当前角色(roleLogo):', role); 
    this.generateNavList(role);
    this.loadUnreadCount();
  },
  onShow() {
    this.loadUnreadCount(); // 页面显示时刷新未读数
  },
  methods: {
    // 按角色生成导航列表
    generateNavList(role) {
      // 用户端（CUSTUMER）导航
      if (role === 'CUSTOMER') {
        this.navList = [
          {
            text: '我的工单',
            path: '/pages/User/workorder/workorder', // 与工单页面路径一致
            icon: '/static/icons/user-workorder.png',
            selectedIcon: '/static/icons/user-workorder-selected.png',
            showBadge: false
          },
          {
            text: '我的消息',
            path: '/pages/User/message/message', // 与消息页面路径一致
            icon: '/static/icons/message.png',
            selectedIcon: '/static/icons/message-selected.png',
            showBadge: true // 显示未读徽章
          },
          {
            text: '用户中心',
            path: '/pages/User/profile/profile', // 与用户中心页面路径一致
            icon: '/static/icons/mine.png',
            selectedIcon: '/static/icons/mine-selected.png',
            showBadge: false
          }
        ];
      } 
      // 员工端（DISPATCHER）导航（可扩展）
      else if (role === 'DISPATCHER') {
        this.navList = [
          {
            text: '任务大厅',
            path: '/pages/Employee/index/index',
            icon: '/static/icons/home.png',
            selectedIcon: '/static/icons/home-selected.png',
            showBadge: false
          },
          {
            text: '工单管理',
            path: '/pages/Employee/workorder/workorder',
            icon: '/static/icons/workorder.png',
            selectedIcon: '/static/icons/workorder-selected.png',
            showBadge: false
          },
          {
            text: '消息列表',
            path: '/pages/Employee/message/message',
            icon: '/static/icons/message.png',
            selectedIcon: '/static/icons/message-selected.png',
            showBadge: true
          },
          {
            text: '员工中心',
            path: '/pages/Employee/mine/mine',
            icon: '/static/icons/mine.png',
            selectedIcon: '/static/icons/mine-selected.png',
            showBadge: false
          }
        ];
      }
    },

    // 加载未读消息数（模拟逻辑，实际对接后端）
    loadUnreadCount() {
      const messages = uni.getStorageSync('messages') || [];
      const role = uni.getStorageSync('roleLogo');
      
      if (role === 'CUSTUMER') {
        this.unreadCount = messages.filter(msg => msg.receiver === 'user' && !msg.isRead).length;
      } else if (role === 'DISPATCHER') {
        this.unreadCount = messages.filter(msg => msg.receiver === 'employee' && !msg.isRead).length;
      }
    },

    // 页面跳转（用 navigateTo 适配自定义导航）
    navigateTo(path) {
      if (this.currentPath === path) return; // 点击当前页不跳转
      uni.navigateTo({ url: path }); // 跳转到目标页
    }
  }
};
</script>

<style scoped>
.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 998;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  position: relative; /* 徽章定位用 */
}

.nav-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 8rpx;
}

.nav-text {
  font-size: 24rpx;
  color: #666;
}

/* 选中态样式 */
.nav-text.active {
  color: #5555ff;
  font-weight: 500;
}

/* 未读徽章样式 */
.badge {
  position: absolute;
  top: 15rpx;
  right: 25rpx;
  min-width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  font-size: 20rpx;
  color: #fff;
  background: #ff4d4f;
  border-radius: 15rpx;
  padding: 0 6rpx;
}
</style>